<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="paySuccess">
      <text class="payImage font_family icon-chenggong_tongyong_1" />
      <view v-if="type == 'pay'" class="tipsCon">
        <!--#ifdef MP-ALIPAY-->
        支付宝支付成功
        <!--#endif-->
        <!--#ifdef MP-WEIXIN-->
        微信支付成功
        <!--#endif-->
      </view>
      <view v-else class="tipsCon"> 订单金额 </view>
      <view class="price">￥{{ successObj.paid_amount }}</view>
      <view v-if="type == 'confrim'" class="moreTips">
        <u-count-down
          :time="timeNum"
          format="DD:HH:mm:ss"
          auto-start
          millisecond
          @change="onChange"
        >
          <view class="time">
            汇款时请务必淮确填写支付流水号，便于及时转账，线下汇款订单的支付有效期为
            <text class="time__item">{{ timeData.days }}天</text>
            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours }}小时</text>
            <text class="time__item">{{ timeData.minutes }}分钟</text>
            ，请尽快完成转账，避免超时系统自动取消。
          </view>
        </u-count-down>
      </view>
      <view :class="[type == 'pay' ? 'firstInfoPay' : 'firstInfo', 'payInfo'] ">
        <text>订单号</text> <text>{{ order_id }}</text>
      </view>
      <view class="payInfo">
        <text>配送方式</text> <text>{{ expressStatus[successObj.sent_type] }}</text>
      </view>
      <view v-if="successObj.sent_type == 50" class="payInfo">
        <text>提货日期</text> <text>预计{{ successObj.self_take_in_str }}</text>
      </view>
      <view v-else class="payInfo">
        <text>预计送达日期</text> <text>预计{{ successObj.may_arrived_in }}送达</text>
      </view>

      <view v-if="successObj.sent_type == 50" class="tipsBus">
        <view style="font-size: 24rpx;color: #666666;">温馨提示：</view>
        <view>1.我们会尽量提前为您准备好货，以便于自提时顺利取货，但您选择的时间可能会因库存不足等因素导致订单延迟，请您谅解！</view>
        <view>2.鑫方盛平台不会以任何理由，提醒您点击任何链接进行操作，谨防上当受骗！</view>
      </view>
      <!-- 关注微信公众号 -->
      <!--     #ifdef MP-WEIXIN-->
      <official-account :style="'width: 100%;'" />
      <!--    #endif-->
      <view class="footer">
        <view @click="swiTab">返回首页</view>
        <view v-if="successObj.sent_type == 50" class="active" @click="goDraw">查看自提点信息</view>
        <view v-else class="active" @click="lookOrder">查看订单</view>
      </view>
    </view>
  </basePage>
</template>

<script>
import { queryMayArrivedIn } from '@/api/orderApi';

export default {
  data() {
    return {
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      type: 'confrim',
      order_id: '',
      successObj: {},
      expressStatus: {
        '10': '快递',
        '20': '快运-送货上门',
        '21': '快运-站点自提',
        '30': '专车包车',
        '40': '鑫方盛物流',
        '50': '上门自提',
      },
      timeData: {},
      timeNum: 0
    }
  },
  onLoad(option) {
    this.type = option.type
    this.order_id = option.order_id
    this.timeNum = Number(option.timeNum)
    var title = this.type == 'confrim' ? '确认成功' : '支付成功'
    uni.setNavigationBarTitle({ title })
    this.queryMayArrivedIn()
  },
  methods: {
    goDraw() { // 查看自提信息
      const { platform } = this.successObj
      if (platform == 10 || platform == 20) { // 平台
        console.log('这是货到付款 查看提货码', this.successObj.paid_type)
        uni.navigateTo({
          url: '/orders/drawalShop/index?id=' + this.order_id + '&paidType=' + this.successObj.paid_type
        });
      } else {
        uni.navigateTo({
          url: '/orders/pickup-Infomation/pickup-Infomation?orderNo=' + this.order_id
        });
      }
    },
    onChange(e) {
      this.timeData = e
    },
    async queryMayArrivedIn() {
      const res = await queryMayArrivedIn({ order_id: this.order_id })
      if (res.errorCode == 0) {
        this.successObj = res.data
      }
    },
    lookOrder() {
      uni.reLaunch({
        // url: `/orders/moreOrderDetail/index?id=${this.order_id}`
        url: `/pages/order/moreOrder`
      });
    },
    swiTab() {
      uni.reLaunch({
        url: '/shopIndex/shopIndex'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background:$uni-bg-color;
}
  .firstInfo {
    border-top:2rpx solid $uni-border-gray;
    margin-top: 48rpx;
  }
  .firstInfoPay {
    border-top: 2rpx solid $uni-border-gray;
    margin-top: 70rpx;
  }
  .paySuccess{
    padding: 32rpx;
    box-sizing: border-box;
    padding-top: 60rpx;
    text-align: center;
    background: $uni-bg-color;
    .payImage {
      font-size: 104rpx;
      display: block;
      color: $uni-color-success;
    }
    .tipsCon {
      font-weight: 700;
      text-align: center;
      color: $uni-text-color;
      font-size: $uni-font-size-lg;
    }
    .price {
      color: $uni-text-color-orange;
      font-size: 64rpx;
      font-weight: 700;
      text-align: center;
      margin-top: 8rpx;
    }
    .moreTips {
      margin-top: 46rpx;
      font-weight: 400;
      padding: 0 44rpx;
      line-height: 34rpx;
      color: $uni-text-color-grey;
      font-size: $uni-font-size-sm;
    }
    .tipsBus {
      padding: 30rpx 10rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      color: $uni-text-color;
      view {
        margin-top: 10rpx;
        line-height: 40rpx;
      }
    }
    .payInfo {
      border-bottom: 2rpx solid #F5F5F5;
      padding: 30rpx 0rpx;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      color:$uni-text-color;
      font-size: $uni-font-size-sm;
    }
    .footer {
      display: flex;
      position: fixed;
      bottom: 90rpx;
      left: 0;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      width: 100%;
      padding: 0rpx 32rpx;
      box-sizing: border-box;
      view {
        width: 314rpx;
        height: 64rpx;
        border: 2rpx solid #DEDEDE;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        background: $uni-bg-color;
        color: $uni-text-color;
        font-size: $uni-font-size-base;
        border-radius: $uni-border-radius-default;
      }
      .active {
        background: $uni-bg-color-orange;
        color:$uni-text-color-inverse;
        border:2rpx solid #FF5533;
      }
    }
  }
</style>
